<template>
  <div>
    <search @search-data="handlerSearchData" />
    <div class="center">
      <p>
        <span class="sp1">客户数量:2000万</span>
      </p>
    </div>
    <hr />
    <div class="bot">
      <userTable
        :data="data"
        :total="total"
        :loadData="setPage"
        :page="currentPage"
        @pass-value="handleValueFromChild"
      />
    </div>
    <mydialog
      :dialogFormVisible="dialogFormVisible"
      @set-visible="setVisible"
      :setVisible="setVisible"
      :detailData="result"
    />
  </div>
</template>
  

  <script lang="ts" setup>  
import { ref } from "vue";  
import { reactive } from "vue";
import useUserList from "@/hooks/users";
import mydialog from "./ui/mydialog.vue";
import type { UserListType } from "@/typings/custmoerType";
import userTable from "./ui/userTable.vue";
import search from "./ui/search.vue";


//执行函数 结构数据
const [currentPage, data, total, loadData] = useUserList();

//页码设置逻辑
const setPage = (page: number) => {
  loadData(page);
};

//广度类型接口定义
interface IProps {
  data: UserListType[];
  total: number;  
  loadData: (page: number) => void;
  page: number;
}

// form表单数据类型定义
const formInline = reactive({
  name: "",   
  number: "",
  sex: "",
});
const result: any = ref();
const searchData: any = ref();
//详情页面的设定
const dialogFormVisible = ref(false);
//控制二级页面显示
const setVisible = (v: boolean) => {
  dialogFormVisible.value = v;
  if (!v) {
    loadData(currentPage.value);
  }
};

//搜索 传过来的数据
function handleValueFromChild(value: string) {
  setVisible(true);
  const searchId = parseInt(value);
  const res = data.value.filter((item) => item.id === searchId);
  result.value = res[0];
}
//处理子组件传来的值
const handlerSearchData = (ret: any) => {
  searchData.value = ret;
  console.log(searchData.value);
};
</script>
  
  <style src="./style.scss" scoped></style>
  